<template>
	<view class="main">
		<view class="card1">
			<view class="title">
				异常类别：
			</view>
			<view class="tag-part">
				<template v-for="(item,index) in tagDatas">
					<view class="tag-view" :key="index" v-if="tagCurrent===index">
						<u-tag :text="item.label" class="tag-part" type="error"
							:mode="tagCurrent===index?'dark':'plain'" />
					</view>
				</template>
			</view>
		</view>
		<!-- 持续时间及按钮 -->
		<view class="card5" v-if="tableDatas.datas[0]">
			<view class="item" v-for="(item,index) in detailDatas['card5']" :key="index">
				<view class="label-part">
					{{ item.label+'：'}}
				</view>
				<view class="text-part">
					{{ item.prop ?  tableDatas.datas[0][item.prop]:''}}
				</view>
			</view>
		</view>
		<view class="card2">
			<view class="label-part">
				持续时间：
			</view>
			<view class="time-part">
				{{ duration.hours + ':' + duration.minutes + ':' + duration.seconds }}
			</view>
			<view class="button-part">
				<!-- <view v-if="!(resolutionStatus)" class="circle1" :class="isBeging?'start':'end'">
					<view class="circle0" @click="handleClick"> {{isBeging ? '开始':'处理'}}<br>{{isBeging ? '处理':'完成'}}
					</view>
				</view> -->
			</view>
		</view>
		<!-- 开始结束时间 -->
		<view class="card3" v-if="tableDatas.datas.length">
			<view class="item" v-for="(item,index) in detailDatas['card3']" :key="index">
				<view class="label-part">
					{{ item.label+'：'}}
				</view>
				<view class="text-part">
					{{ item.prop?  tableDatas.datas[0][item.prop]:''}}
				</view>
			</view>
		</view>
		<!-- 输入表单 -->
		<view class="card4" v-if="!isBeging">
			<view class="item" v-for="(item,index) in formList" :key="index">
				<view class="label-part label-part-4-1">
					{{item.label}}：
				</view>
				<view class="text-part">
					<u-input v-if="item.ControlType==='textarea'" type="textarea" v-model="form[item.prop]"
						class="input-textarea" :disabled="!!resolutionStatus" border></u-input>
					<u-input v-else v-model="form[item.prop]" :disabled="!!resolutionStatus" border></u-input>
				</view>
			</view>
		</view>
		<!-- 上传图片 -->
		<view class="card4" v-if="!isBeging">
			<view class="item card-item">
				<view class="label-part ">
					<span>处理图像：</span>
				</view>
				<view class="text-part">
					<htz-image-upload ref="uploadRef" :max="5" v-if="!resolutionStatus||uploadDatas.fileList.length"
						v-model="uploadDatas.fileList" mediaType="all" :formData="uploadDatas.formData"
						:compress="false" @chooseSuccess="chooseFile" :dataType="1" :remove="!resolutionStatus"
						:add="!resolutionStatus"></htz-image-upload>
					<view v-else>暂无图片</view>
				</view>
			</view>
		</view>

		<!-- 显示图片 -->
		<view class="card4">
			<view class="item card-item">
				<view class="label-part">
					异常图像：
				</view>
				<view class="text-part" v-if="imageDatas.length">
					<htz-image-upload ref="uploadRef1" :max="5" v-model="imageDatas" mediaType="all" :dataType="1"
						:remove="false" :add="false"></htz-image-upload>
				</view>
				<view v-else>暂无图片</view>
			</view>
		</view>

	</view>
</template>

<script>
	// 开始异常
	export default {
		data() {
			return {
				isBeging: false,
				rowData: null,
				tagDatas: [],
				tableDatas: {
					ID: 24401,
					datas: [],
					columns: [],
					condition: {},
					selectRow: null
				},
				form: {
					Remark1: '', // 原因分析
					Remark2: '', //临时解决方案
				},
				tagCurrent: 0,
				detailDatas: {
					card3: [{
							prop: 'StartDate',
							label: '开始时间'
						},
						{
							prop: 'EndDate',
							label: '结束时间'
						},
					],
					card4: [{
							prop: 'Code',
							label: '图号',
							type: 'select'
						},
						{
							prop: 'Description',
							label: '异常描述',
							type: 'textarea'
						},

					],
					card5: [{
							prop: 'SourceOrderNo',
							label: 'PO单号'
						},
						{
							prop: 'MaterialName',
							label: '组件名称'
						},
						{
							prop: 'PreparePlanName',
							label: '任务名称'
						},
						{
							prop: 'ChildMaterialCode',
							label: '零件图号'
						},
						{
							prop: 'CreatedByName',
							label: '提报人员'
						},
						{
							prop: 'AbnormalDescription',
							label: '异常描述'
						},
					],
				},
				Description: '',
				query: {},
				uploadDatas: {
					action: uni.getStorageSync('url') + '/APSAPI/UploadAbnomalImages',
					formData: {},
					fileList: [],
					timestamp: '',
					id: null,
					type: 'video',
					videoPath: ''
				},
				timer: null,
				duration: {
					hours: '00',
					minutes: '00',
					seconds: '00'
				},
			};
		},
		computed: {
			imageDatas() {
				const url = uni.getStorageSync('url') || ''
				return this.tableDatas.datas[0]?.FilePath?.split(',').map(val => ({
					type: val.includes('AbnormalVideo') ? 1 : 0,
					url: url + val
				})) || []
			},
			imageDatas2() {
				const url = uni.getStorageSync('url') || ''
				return this.tableDatas.datas[0]?.FilePath2?.split(',').map(val => ({
					type: val.includes('ResolutionVideo') ? 1 : 0,
					url: url + val
				})) || []
			},
			formList() {
				return this.tableDatas.columns.filter(val => ['Remark1', 'Remark2'].includes(val.prop))
			},
			resolutionStatus() {
				return this.tableDatas.datas.length && this.tableDatas.datas[0].ResolutionStatus
			}
		},
		onLoad(e) {
			this.query = JSON.parse(e.row)
			// this.isBeging = !e.ResolutionStartDate
			this.uploadDatas.id = e.ID
			this.getApsData().then(() => {
				this.getAbnormalOptions()
				this.startTiming()
			})
		},
		methods: {
			fileChange(lists) {
				this.uploadDatas.fileList = lists
			},
			tagChange(item, index) {
				if (!this.isBeging) return
				this.tagCurrent = index
			},
			async getAbnormalOptions() {
				const condition = {
					dicID: 7770,
				}
				const res = await this.$request.post({
					url: '/APSAPI/APSData',
					data: condition
				}).catch(err => err)
				if (!res) return
				const {
					data
				} = res
				const rowData = this.tableDatas.datas[0]
				this.$set(this, 'tagDatas', data.map((val, index) => {
					if (val.AbnormalReasonID === rowData.AbnormalReasonID) this.$set(this, 'tagCurrent',
						index)
					return {
						label: val.SmallType,
						value: val.AbnormalReasonID
					}
				}))
			},
			// 获取数据
			async getApsData(remark = 0) {
				const condition = {
					dicID: this.tableDatas.ID
				}
				condition.ID = this.query.ID
				const res = await this.$request.post({
					url: '/APSAPI/APSData',
					data: condition
				}).catch(err => err)
				const {
					result,
					msg,
					data,
					Columns
				} = res
				if (!result) return uni.showToast({
					title: msg,
					icon: 'error'
				})
				this.$set(this.tableDatas, 'datas', data)
				if (data.length) {
					this.isBeging = !data[0].ResolutionStartDate
					this.$set(this.form, 'Remark1', data[0].Remark1 || '')
					this.$set(this.form, 'Remark2', data[0].Remark2 || '')
					if (data[0].FilePath2) {
						const url = uni.getStorageSync('url') || ''
						this.$set(this.uploadDatas, 'fileList', data[0]?.FilePath2?.split(',').map(val => ({
							type: val.includes('ResolutionVideo') ? 1 : 0,
							url: url + val
						})) || [])
					}
				}

				this.$set(this.tableDatas, 'columns', Columns[0])
			},
			//开始计时
			startTiming() {
				const start = new Date(this.tableDatas.datas[0].StartDate)
				if (this.tableDatas.datas[0]?.EndDate) {
					const now = new Date(this.tableDatas.datas[0]?.EndDate);
					const diff = now - start; // 计算时间差，单位为毫秒
					const hours = Math.floor(diff / (1000 * 60 * 60));
					const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
					const seconds = Math.floor((diff % (1000 * 60)) / 1000);
					this.duration = {
						hours: hours < 10 ? '0' + hours : hours,
						minutes: minutes < 10 ? '0' + minutes : minutes,
						seconds: seconds < 10 ? '0' + seconds : seconds,
					};
				} else {
					this.timer = setInterval(() => {
						const now = new Date();
						const diff = now - start; // 计算时间差，单位为毫秒
						const hours = Math.floor(diff / (1000 * 60 * 60));
						const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
						const seconds = Math.floor((diff % (1000 * 60)) / 1000);
						this.duration = {
							hours: hours < 10 ? '0' + hours : hours,
							minutes: minutes < 10 ? '0' + minutes : minutes,
							seconds: seconds < 10 ? '0' + seconds : seconds,
						};
					}, 1000);
				}
			},
			// 选择文件
			chooseFile(filePaths, type) {
				filePaths.forEach(val => {
					this.uploadDatas.fileList.push({
						type: type,
						url: val
					})
				})
			},
			// 上传文件
			uploadfile() {
				this.$refs.uploadRef.imgUpload2(this.uploadDatas.fileList, this.uploadDatas.action)
			},
		},
		beforeDestroy() {
			if (this.timer) {
				clearInterval(this.timer);
			}
		},


	}
</script>

<style lang="scss" scoped>
	.main {
		background-color: $uni-bg-color-grey;
		width: 100%;
		height: 100%;
		min-height: 100vh;
	}

	.tag-part {
		text-wrap: nowrap;
		text-overflow: ellipsis;
		// max-width: 100%;
		width: 100%;
		overflow: hidden;
		font-size: 24rpx;
	}

	.card1,
	.card2,
	.card3,
	.card4,
	.card5 {
		background-color: $uni-bg-color;
		margin-bottom: 10rpx;
		padding: 20rpx 20rpx;
		width: 100%;
	}

	.card1 {
		display: flex;
		flex-wrap: nowrap;
		width: 100%;
		flex-direction: row;

		.title {
			color: $uni-color-error;
			width: auto;
			text-wrap: nowrap;
			font-size: large;
			width: 300rpx;
		}

		.tag-part {
			// width: 100%;
			// flex-grow: 1;
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			// margin-top: 20rpx;
			.tag-view {
				max-width: 25%;
				// margin-right: 15rpx;
			}
		}

	}

	.label-part {
		display: flex;
		align-items: center;
		color: $uni-text-color-placeholder;
		justify-content: flex-end;
		width: 150rpx;
		min-width: 150rpx;
		font-size: small;
	}

	.label-part-4-1 {
		align-items: start;
		padding: 10rpx 0;
	}

	.card2 {
		display: flex;
		flex-wrap: nowrap;
		position: relative;

		.label-part {
			align-items: center;
		}

		.remark-part {
			position: absolute;
			bottom: 10rpx;
			font-size: 20rpx;
			color: $uni-text-color-placeholder;
			left: 50%;
			left: 50%;
			/* 左边距设置为父元素宽度的50% */
			transform: translateX(-50%);
		}

		.time-part {
			flex-grow: 1;
			display: flex;
			align-items: center;
			color: $uni-color-primary;
			font-size: 60rpx;
			padding: 0 0 0 10rpx;
		}

		.button-part {
			// width:;
			padding: 0 10rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.start {
				background-color: rgb(63, 189, 0, 0.5);

				>* {
					background-color: rgb(63, 189, 0);
				}
			}

			.end {
				background-color: rgb(81, 131, 255, 0.4);

				>* {
					background-color: rgb(81, 131, 255);
				}
			}

			.finish {
				background-color: rgb(255, 0, 0, 0.4);

				>* {
					background-color: rgb(255, 0, 0);
				}
			}

			.circle1 {

				width: 150rpx;
				height: 150rpx;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;

				.circle0 {
					width: 130rpx;
					height: 130rpx;
					border-radius: 50%;
					font-size: 30rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #fff;

				}

			}
		}
	}

	.card-item {
		.label-part {
			align-items: flex-start;
		}
	}

	.card3,
	.card4,
	.card5 {
		display: flex;
		flex-direction: column;

		.item {
			display: flex;
			flex-wrap: nowrap;
			overflow: hidden;
			margin-bottom: 10rpx;
		}

		.text-part {
			flex-grow: 1;
			color: #000;
			text-indent: 5rpx;
			padding-left: 10rpx;
			text-wrap: wrap;
			overflow: hidden;
			word-wrap: break-word;
		}
	}

	.confirm-main {
		display: flex;
		flex-direction: column;
		padding: 30rpx 0;

		.confirm-title {
			font-size: large;
			padding: 10rpx 20rpx;
		}

		.button-part {
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: center;

			.btn {
				width: 40%;
			}
		}
	}

	.upload-video-main {
		width: 100px;
		height: 100px;
		margin: 5px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #f4f5f6;

		.text {
			margin-top: 11px;
			line-height: 22px;
			font-size: 14px;
		}
	}
</style>